<template>
  <div class="drawer-item">
    <div class="mgb10">
      <el-radio-group v-model="currentAccountType" class="time-radio-group">
        <el-radio-button
          v-for="accountItem in currentPlatformList"
          :key="accountItem.accountType"
          :label="accountItem.accountType"
        >
          {{accountItem.platformName}}
          ({{accountItem.logisticTypePriceType === 1 ? $t('userInfo.default') :  $t('userInfo.custom')}})
        </el-radio-button>
      </el-radio-group>
    </div>

    <el-switch
      :value="currentObj.logisticTypePriceType"
      active-color="#ff4949"
      inactive-color="#1890ff"
      :active-text="$t('userInfo.custom')"
      :inactive-text="$t('userInfo.default')"
      :inactive-value="1"
      :active-value="2"
      @change="setLogisticTypeDefault"
    >
    </el-switch>

    <template v-if="currentAccountType === 'MercadoLibre'">
      <div class="mgt20">
        <div class="label-title">{{$t('order.express')}}：</div>
        <goods-size-price :goods-size-sticker-price="currentObj.logisticDropOffPrice" @changeValue="changeLogisticTypePrice"></goods-size-price>
      </div>
    </template>

    <div class="mgt20">
      <div class="label-title">{{$t('快递（无面单）')}}：</div>
      <div class="mgt10">
        <div class="label-title" style="display: inline">
          {{$t('操作费') }}：
        </div>
        <el-input-number
          v-model="currentObj.customPrice"
          :precision="2"
          :min="0"
          @change="changeLogisticTypePrice"
        >
        </el-input-number>
        {{$t('table.元/单')}}
      </div>

      <goods-size-price :goods-size-sticker-price="currentObj.logisticCustomPrice" @changeValue="changeLogisticTypePrice"></goods-size-price>
      <div style="font-size: 12px;color: #7F7F7F;" class="mgb10">* {{ $t('特殊类目平台不提供面单需快递发货时收取的操作费') }}</div>
    </div>

    <template v-if="currentAccountType === 'MercadoLibre'">
      <div class="mgt20">
        <div class="label-title">Flex：</div>
        <goods-size-price :goods-size-sticker-price="currentObj.logisticSelfServicePrice" @changeValue="changeLogisticTypePrice"></goods-size-price>
      </div>

      <div class="mgt20">
        <div class="label-title">Colecta：</div>
        <goods-size-price :goods-size-sticker-price="currentObj.logisticCrossDockingPrice" @changeValue="changeLogisticTypePrice"></goods-size-price>
      </div>
    </template>






    <div class="mgb20" style="font-size: 12px;color: #7F7F7F;">* {{ $t('setting.settingText3') }}</div>


  </div>
</template>

<script>
import GoodsSizePriceMixin from "@/views/setting/mixin/GoodsSizePriceMixin";
import {deepCopy} from "@/utils";
import LogisticTypePriceMixin from "@/views/setting/mixin/LogisticTypePriceMixin";
import GoodsSizePrice from "@/views/warehouse/components/GoodsSizePrice.vue";
import {platformList} from "@/utils/platform";

export default {
  name: 'LogisticTypePriceDrawerItem',
  components: {GoodsSizePrice},
  mixins: [LogisticTypePriceMixin],
  props: {
    userSetting: {
      type: Object,
    },
    userForm: {
      type: Object,
    },
    setting: {
      type: Object,
    }
  },
  computed: {
    currentPlatformList(){
      return this.platformList.filter(item=>{
        return !!this.setting.platformOneShippingPrice.find(_item => _item.accountType === item.accountType);
      })
        .map(item=>{
          const obj = this.userForm.platformOneShippingPrice.find(_item => _item.accountType === item.accountType)
          item.logisticTypePriceType = obj.logisticTypePriceType
          return item
        })
    },
    currentObj(){
      return this.userForm.platformOneShippingPrice.find(item=> item.accountType === this.currentAccountType)
    },
    currentSetting(){
      return this.setting.platformOneShippingPrice.find(_item => _item.accountType === this.currentAccountType);
    }
  },
  data(){
    return {
      currentAccountType: 'MercadoLibre',
      platformList, // 所有的平台
    }
  },
  methods: {
    changeLogisticTypePrice(){
      this.currentObj.logisticTypePriceType = 2;
    },
    // 设置默认快递费
    setLogisticTypeDefault(){
      if(this.currentObj.logisticTypePriceType === 1){
        this.currentObj.logisticTypePriceType = 2;
      }else{
        this.currentObj.logisticTypePriceType = 1;
      }
      this.currentObj.logisticDropOffPrice = deepCopy(this.currentSetting.logisticDropOffPrice);
      this.currentObj.logisticSelfServicePrice = deepCopy(this.currentSetting.logisticSelfServicePrice);
      this.currentObj.logisticCrossDockingPrice = deepCopy(this.currentSetting.logisticCrossDockingPrice);
      this.currentObj.customPrice = this.currentSetting.customPrice
    },
  }
}
</script>

<style scoped lang="scss">
@import "../scss/drawer-item";
</style>
